*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100vh;
	margin: 0;

	background: @color--bg;
}

html {
	font-family: @font--1;
	font-size: 100%;
	color: @color--text;
	letter-spacing: 0.1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {

	// resize activity indicator
	&::after {
		content: ' ';

		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 1200;

		display: block;
		width: 6rem;
		height: 6rem;
		margin: -5.5rem 0 0 -3rem;

		border: 1px solid @color--text;
		border-radius: 50%;

		opacity: 0;

		pointer-events: none;

		transition-duration: 150ms;
		transition-property: opacity, filter;
		transition-timing-function: ease;
	}

	.visible--intro & {

		&::after {
			opacity: 1;
		}
	}

	.resizing & {

		&::after {
			border-style: dashed;

			opacity: 1;

			animation: rotating 3s infinite linear;

			transition-duration: 750ms;
		}
	}
}
